{% include "data/template-ui.html" %}
<link rel="stylesheet" type="text/css" href="/static/css/datatables/dataTables.bootstrap4.min.css" />

<style>
    .container-fluid>.row {
        margin-bottom: 10px;
    }
    .container-fluid>.row>div, .container-fluid>.row .card {
        height: 100%;
    }
    #table th, #table td, .dataTables_scrollHead th, .dataTables_scrollBody td {
        padding: 0 !important;
        font-size: 12px;
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }
    thead th {
        background-color: #EDF4FA;
        color: #66718E;
    }
    tbody tr td {
        padding: 9px;
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }
    .overview_table tr td{
        font-size: 14px;
        line-height: 31px;
        padding: 0.3rem;
        vertical-align: middle;
    }
    .card {
        margin: 0 !important;
        padding: 15px 20px !important;
    }
    .item {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .item-left {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        margin-right: 5px;
        background-color: #1eafc5;
        border-radius: 50%;
    }
    .item-left i {
        color: #fff;
        font-size: 26px;
    }
    .item-right {
        flex: 1;
        margin-left: 10px;
    }
    .item-right .value {
        color: #31B4C9;
        font-size: 20px;
    }
    #chart1, #chart2, #chart3 {
        width: 100%;
        height: 100%;
    }
    #table th, #table td {
        padding: 0;
    }
    #table_wrapper {
        /*height: 300px;*/
    }
</style>

<!-- 正文主体 -->

<div class="container-fluid animated fadeInUp" style="padding: 0 15px;">
    <!--数据概览-->
    <div class="row" style="height: 130px;margin-top: 10px;">
        <div class="col-lg-8" style="padding-right: 10px">
            <div class="card">
                <h4 class="card-title">数据情况</h4>
                <div class="card-body">
                    <div class="card-content">
                        <div class="row">
                            <div class="col-md-3 item">
                                <div class="item-left">
                                    <i class="fa fa-envelope-open-o"></i>
                                </div>
                                <div class="item-right">
                                    <label>数据标准数</label>
                                    <div id="bzs" class="value"></div>
                                </div>
                            </div>
                            <div class="col-md-3 item">
                                <div class="item-left">
                                    <i class="fa fa-linode"></i>
                                </div>
                                <div class="item-right">
                                    <label>质检模型数</label>
                                    <div id="zjmxs" class="value"></div>
                                </div>
                            </div>
                            <div class="col-md-3 item">
                                <div class="item-left">
                                    <i class="fa fa-thermometer-empty"></i>
                                </div>
                                <div class="item-right">
                                    <label>规则数</label>
                                    <div id="gzs" class="value"></div>
                                </div>
                            </div>
                            <div class="col-md-3 item">
                                <div class="item-left">
                                    <i class="fa fa-window-restore"></i>
                                </div>
                                <div class="item-right">
                                    <label>校验项数</label>
                                    <div id="jyxs" class="value"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4" style="padding-left: 0;">
            <div class="card">
                <h4 class="card-title">方案调度情况</h4>
                <div class="card-body">
                    <div class="card-content">
                        <div class="row">
                            <div class="col-md-6 item">
                                <div class="item-left">
                                    <i class="fa fa-cogs"></i>
                                </div>
                                <div class="item-right">
                                    <label>调度方案数</label>
                                    <div id="ddfas" class="value"></div>
                                </div>
                            </div>
                            <div class="col-md-6 item">
                                <div class="item-left">
                                    <i class="fa fa-check-square"></i>
                                </div>
                                <div class="item-right">
                                    <label>运行中</label>
                                    <div id="yxz" class="value"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="flex: 1">
        <div class="col-lg-12">
            <div class="card">
                <h4 class="card-title" style="margin-bottom: 0">方案质检情况</h4>
                <div class="card-body" style="margin: 0 -15px;">
                    <div id="chart1"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="flex: 1;margin-bottom: 15px;">
        <div class="col-lg-4" style="padding-right: 10px;">
            <div class="card">
                <h4 class="card-title" style="margin-bottom: 0">方案质检情况</h4>
                <div class="card-body">
                    <table id="table" class="table table-bordered" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>方案名</th>
                                <th>错误数</th>
                                <th>默认绩效</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-4" style="padding-left: 0;padding-right: 10px;">
            <div class="card">
                <h4 class="card-title" style="margin-bottom: 0">绩效分布情况</h4>
                <div class="card-body" style="margin: 0 -15px;">
                    <div id="chart2"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4" style="padding-left: 0;">
            <div class="card">
                <h4 class="card-title" style="margin-bottom: 0">规则分布情况</h4>
                <div class="card-body" style="margin: 0 -15px;">
                    <div id="chart3"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    //将用户名存入localStorage
    localStorage.setItem('username', "{{ username }}");
</script>

<script type="text/javascript" src="/static/js/DataTables/DataTables-1.10.18/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/static/js/DataTables/DataTables-1.10.18/js/dataTables.bootstrap.js"></script>

<script>
    let option1 = {
        color: ["#1EAFC5", "#FAD337"],
        grid: {
            left: 40,
            top: 40,
            bottom: 40,
            right: 40
        },
        tooltip: {
            trigger: 'item',
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle:{
                    type:'dashed'
                }
            }
        },
        legend: {
            data: ['数据量', '错误数']
        },
        series: []
    };
    let option2 = {
        color: ["#ff9f05", "#2da1f9", "#67ca29"],
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            data: ['0~70', '70~90', '90~100']
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['45%', '65%'],
            data: []
        }]
    };
    let option3 = {
        color: ["#67ca29", "#2da1f9", "#ff9f05", "#f46462"],
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: 10,
            data: []
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['45%', '65%'],
            data: []
        }]
    };

    $(document).ready(function () {
        setFirstLine();
        setSecondLine();
        setThirdLine();
    });

    function setFirstLine() {
        $.ajax({
            type: "POST",
            url: "../../api/dashboard/home_page_info_label",
            contentType: 'application/json',
            success: function (result) {
                if (result.stat == 200) {
                    result.data.forEach(v => {
                        $(`#${v.label_id}`).html(v.value);
                    });
                }
            },
            error: function (e) {
                console.error(e);
            }
        })
    }

    function setSecondLine() {
        let chart1 = echarts.init(document.getElementById('chart1'));
        let chart2 = echarts.init(document.getElementById('chart2'));
        $.ajax({
            type: "POST",
            url: "../../api/dashboard/home_page_info_model",
            contentType: 'application/json',
            success: function (result) {
                if (result.stat == 200) {
                    if (result.data.length === 0) {
                        showText($('#chart1'), '暂无数据');
                        showText($('#chart2'), '暂无数据');
                    } else {
                        hideText($('#chart1'));
                        let error_counts = [], all_counts = [], less70 = 0, less90 = 0, less100 = 0;
                        result.data.forEach(v => {
                            option1.xAxis.data.push(v.model_name);
                            all_counts.push(v.all_count);
                            error_counts.push(v.error_count);
                            if (v.total_coefficient < 70) {
                                less70 += 1;
                            }
                            if (v.total_coefficient > 70 && v.total_coefficient < 90) {
                                less90 += 1;
                            }
                            if (v.total_coefficient > 90) {
                                less100 += 1;
                            }
                        });
                        option1.series = [
                            {name: '数据量', data: all_counts, type: 'bar', barMaxWidth: 150},
                            {name: '错误数', data: error_counts, type: 'bar', barMaxWidth: 150}
                        ];
                        option2.series[0].data = [
                            {name: '0~70', value: less70},
                            {name: '70~90', value: less90},
                            {name: '90~100', value: less100}
                        ];
                        chart1.setOption(option1);
                        chart2.setOption(option2);
                        setTable(result.data);
                    }
                } else {
                    showText($('#chart1'), '请求失败');
                    showText($('#chart2'), '请求失败');
                }
            },
            error: function (e) {
                showText($('#chart1'), '请求失败');
                showText($('#chart2'), '请求失败');
                console.error(e);
            }
        })
    }

    function setThirdLine() {
        let chart = echarts.init(document.getElementById('chart3'));
        $.ajax({
            type: "POST",
            url: "../../api/dashboard/home_page_info_distribution",
            contentType: 'application/json',
            success: function (result) {
                if (result.stat == 200) {
                    if (result.data.length === 0) {
                        showText($('#chart3'), '暂无数据');
                    } else {
                        hideText($('#chart3'));
                        result.data.forEach(v => {
                            option3.legend.data.push(v.cmc);
                            option3.series[0].data.push({name: v.cmc, value: v.value});
                        });
                        chart.setOption(option3);
                    }
                } else {
                    showText($('#chart3'), '请求失败');
                }
            },
            error: function (e) {
                console.error(e);
                showText($('#chart3'), '请求失败');
            }
        })
    }

    function setTable(data) {
        $('#table').DataTable({
            searching: false,
            ordering: false,
            info: false,
            paging: false,
            data: data,
            columns: [
                { data: 'model_name'},
                { data: 'error_count'},
                { data: 'total_coefficient'}
            ],
            //汉化
            language: {
                processing: "玩命加载中...",
                lengthMenu: "显示 _MENU_ 项结果",
                zeroRecords: "没有匹配结果",
                info: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                infoEmpty: "显示第 0 至 0 项结果，共 0 项",
                infoFiltered: "(由 _MAX_ 项结果过滤)",
                infoPostFix: "",
                url: "",
                paginate: {
                    first: "首页",
                    previous: "上一页",
                    next: "下一页",
                    last: "末页"
                },
                sSearch: "搜索:",
            },
            columnDefs: [{
                targets: 2,
                data: null,
                render: function (data, type, row) {
                    if (data < 70) {
                        return `<span style="color: #60acfc">${data}</span>`;
                    } else if (data > 90) {
                        return `<span style="color: #5bc49f">${data}</span>`;
                    } else {
                        return `<span style="color: #32d3eb">${data}</span>`;
                    }
                }
            }]
        });
    }

</script>

</body>

</html>